<template>
  <div  >
      <div class="uers" v-for="(item,index) in arr" :key="index">
          <div class="header_right"  >
      <div class="user-avatar">
        <img :src="item.img" />
      </div>
      <div class="header-top" >
        <div class="user-info">
          <span>{{item.name}}</span><img src="../../../public/img/12.png" alt="" />
        </div>
        <div class="data">
          <p>【福利专享】美甲4选1</p>
        </div>
      </div>
      <div class="score-info">
                <p>{{item.data}}</p>
      </div>
    </div>
    <div class="info">
        <p>评分:<b>很满意</b></p><p>效果:5</p><p>服务:5</p>
    </div>
    <div class="comment">
        {{item.val}}
    </div>
    <div class="image-info">
        <img :src="item.img1" alt="">
         <img :src="item.img2" alt="">
          <img :src="item.img3" alt="">
    </div>
    <div class="product-item" @click="fun1()">
        <div class="product-img">
            <img src="../../../public/img/16.webp" alt="">
        </div>
        <div class="product-right">
            <div class="product-name">
                <h5>【福利专享】西柚果汁清新纯色美甲</h5>
                <p>￥180</p>
            </div>
            <div class="bottom-info">

            </div>
        </div>
    </div>
      </div>
    
  </div>
</template>

<script>
export default {
    data(){
        return{
            arr:[
                {img:"img/11.webp",name:"小河狸",data:"2021-09-08",val:" 体验感很好~西柚色也很好看 本来怕显黑结果不会还挺显白的~我的指甲比较短 如果留长了效果会更好嘻嘻 小姐姐人也很好哦 ",img1:"img/13.webp",img2:"img/14.webp",img3:"img/15.webp"},
                 {img:"img/11.webp",name:"小河狸",data:"2021-09-08",val:" 体验感很好~西柚色也很好看 本来怕显黑结果不会还挺显白的~我的指甲比较短 如果留长了效果会更好嘻嘻 小姐姐人也很好哦 ",img1:"img/13.webp",img2:"img/14.webp",img3:"img/15.webp"},
                  {img:"img/11.webp",name:"小河狸",data:"2021-09-08",val:" 体验感很好~西柚色也很好看 本来怕显黑结果不会还挺显白的~我的指甲比较短 如果留长了效果会更好嘻嘻 小姐姐人也很好哦 ",img1:"img/13.webp",img2:"img/14.webp",img3:"img/15.webp"},
                   {img:"img/11.webp",name:"小河狸",data:"2021-09-08",val:" 体验感很好~西柚色也很好看 本来怕显黑结果不会还挺显白的~我的指甲比较短 如果留长了效果会更好嘻嘻 小姐姐人也很好哦 ",img1:"img/13.webp",img2:"img/14.webp",img3:"img/15.webp"},
                    {img:"img/11.webp",name:"小河狸",data:"2021-09-08",val:" 体验感很好~西柚色也很好看 本来怕显黑结果不会还挺显白的~我的指甲比较短 如果留长了效果会更好嘻嘻 小姐姐人也很好哦 ",img1:"img/13.webp",img2:"img/14.webp",img3:"img/15.webp"},
            ],
        };
    },
    methods:{
      fun1(){
        this.$router.push('/De')
      }
    }
};
</script>

<style scoped>
.uers {
  width: 100%;
  height: 7.8rem;
 border-bottom: 0.2rem solid #eee;
 margin-top: 0.2rem;
}
.header_right {
  width: 100%;
  height: 0.8rem;
  display: flex;
  margin-top: 0.2rem;
}
.user-avatar {
  width: auto;
  height: 0.8rem;
}
.user-avatar img {
  width: auto;
  height: 0.8rem;
  margin-right: 0.17rem;
  border-radius: 50%;
}
.header-top {
  width: 100%;
  height: 0.4rem;
  color: #b7babd;
  font-size: 0.6rem;
}
.user-info {
  width: 2.2rem;
  height: 0.4rem;
  line-height: 0.4rem;
}
.user-info span {
  vertical-align: middle;
  font-size: 0.25rem;
  color: black;
}
.user-info img {
  width: 0.8rem;
  height: 0.4rem;
  vertical-align: middle;
}
.data {
      width: 3.2rem;
  height: 0.4rem;
  font-size: 0.2rem;
}
.data p {
     line-height: 0.4rem;
}
.score-info{
    width: 100%;
    height: 0.4rem;
    line-height: 0.4rem;
}
.score-info p{
    margin-left: 1.3rem;
    color: grey;
}
.info{
    width: 100%;
    height: 0.4rem;
    display: flex;
    line-height: 0.4rem;
}
.info p{
    color: gray;
    margin-right: 0.1rem;
}
.info p b{
    color: #CFB290;
}
.comment{
    font-size: 0.27rem;
    margin-top: 0.16rem;
}
.image-info{
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 0.4rem;
}
.image-info img{
    width: 30%;
}
.product-item{
    width: 100%;
    height: 1.8rem;
    margin-top: 0.6rem;
    display: flex;
    background-color: rgb(247,247,247);
}
.product-img{
    width: 20%;
    margin-top: 0.3rem;
    margin-left: 0.4rem;
    
}
.product-img img{
    width: 100%;
     border-radius: 10%;
}
.product-right{
    width: 80%;
    height: 1.1rem;
    align-self:center
}
.product-name h5{
    font-size: 0.26rem;
    color: #666;
    font-weight: normal;
    margin: 0.2rem;
}
.product-name p{
    color: red;
    font-size: 0.26rem;
}
</style>
